<template>
  <div class="layer-list">
    <ul class="layer-list__list" @dragover="handleLayerDragEnd">
      <li
        class="layer-list__item"
        :class="{
          'layer-list__item--active': item.id === selectLayerId,
          'layer-list__item--dragging':
            item.id === layerDraggable.currentDragDomId,
        }"
        v-for="(item, index) in props.layerList"
        :key="item.id"
        :data-index="index"
        @click="handleLayerClick(item.id)"
        @dragstart="handleLayerDragStart($event, item.id, index)"
        @dragenter="handleDragEnter($event, index)"
        draggable="true"
      >
        <div
          class="layer-list__isHidden"
          @click.stop="handleLayerHiddenOrLocked(item, 'isHidden')"
        >
          <a-tooltip>
            <template #title>{{ item.isHidden ? '显示' : '隐藏' }}</template>
            <div class="layer-list__icon">
              <EyeOutlined v-if="item.isHidden" :style="{ color: '#1890ff' }" />
              <EyeInvisibleOutlined v-else :style="{ color: '#1890ff' }" />
            </div>
          </a-tooltip>
        </div>
        <div
          class="layer-list__isLocked"
          @click.stop="handleLayerHiddenOrLocked(item, 'isLocked')"
        >
          <a-tooltip>
            <template #title>{{ item.isLocked ? '解锁' : '锁定' }}</template>
            <div class="layer-list__icon">
              <LockOutlined
                v-if="!item.isLocked"
                :style="{ color: '#1890ff' }"
              />
              <UnlockOutlined v-else :style="{ color: '#1890ff' }" />
            </div>
          </a-tooltip>
        </div>
        <div class="layer-list__name">
          <InlineEdit
            v-if="item.layerName"
            :value="item.layerName"
            @change="inlineEditChange"
          />
        </div>
        <div class="layer-list__move">
          <a-tooltip>
            <template #title>拖动排序</template>
            <div class="layer-list__icon">
              <FullscreenOutlined :style="{ color: '#1890ff' }" />
            </div>
          </a-tooltip>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: 'LayerList',
})
import { type ComponentData } from '@/store/modules/type/editor'
import { type ILayerDarggable } from './type'
import {
  EyeOutlined,
  EyeInvisibleOutlined,
  LockOutlined,
  UnlockOutlined,
  FullscreenOutlined,
} from '@ant-design/icons-vue'
import InlineEdit from '@/components/inline-edit/inline-edit.vue'
import useEditorStore from '@/store/modules/editorStore'
import { ref, watch } from 'vue'
import { arrayMoveMutable } from 'array-move'
interface layerListProps {
  layerList: ComponentData[]
  currentLayeriId?: string
}
const props = defineProps<layerListProps>()
const emits = defineEmits([
  'selctLayerIdChange',
  'selectLayerInfoChange',
  'dragLayer',
])
const editorStore = useEditorStore()
const selectLayerId = ref('')
const layerDraggable = ref<ILayerDarggable>({
  currentDragDomId: '',
  currentDragIndex: -1,
})
let layerStart = -1
let layerEnd = -1
const handleLayerClick = (id: string) => {
  selectLayerId.value = id
  emits('selctLayerIdChange', id)
}
const handleLayerHiddenOrLocked = (
  item: ComponentData,
  type: 'isHidden' | 'isLocked'
) => {
  const { isHidden, isLocked } = item
  const data = {
    key: type,
    value: type === 'isHidden' ? !isHidden : !isLocked,
  }
  handleLayerClick(item.id)
  emits('selectLayerInfoChange', { data, isRoot: true })
}
const inlineEditChange = (value: string) => {
  const data = {
    key: 'layerName',
    value,
  }
  emits('selectLayerInfoChange', { data, isRoot: true })
}
/**
 * dom拖拽开始
 */
const handleLayerDragStart = (e: DragEvent, id: string, index: number) => {
  layerDraggable.value.currentDragDomId = id
  layerDraggable.value.currentDragIndex = index
}
/**
 * dom拖拽结束
 */
const handleLayerDragEnd = (e: DragEvent) => {
  const currentElement = e.target as HTMLElement
  let moveIndex = -1
  if (currentElement && currentElement.dataset.index) {
    moveIndex = parseInt(currentElement.dataset.index)
  }
  layerStart = layerDraggable.value.currentDragIndex
  layerEnd = moveIndex
  emits('dragLayer', { layerStart, layerEnd })
  layerDraggable.value.currentDragDomId = ''
  //设置组件层级
  editorStore.setLayerZIndex()
}
const handleDragEnter = (e: DragEvent, index: number) => {
  if (layerDraggable.value.currentDragIndex === index) return
  arrayMoveMutable(
    props.layerList,
    layerDraggable.value.currentDragIndex,
    index
  )
  layerDraggable.value.currentDragIndex = index
}
watch(
  () => props.currentLayeriId,
  (newVal) => {
    selectLayerId.value = newVal as string
  },
  {
    immediate: true,
  }
)
</script>

<style scoped lang="scss">
.layer-list {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: white;

  .layer-list__item {
    padding: 10px 12px;
    border-bottom: 1px solid #e8e8e8;
    width: 100%;
    display: flex;
    align-items: center;
    .layer-list__name {
      margin: 0px 10px;
      color: #5c5c5c;
      font-size: 13px;
    }
    .layer-list__icon {
      width: 28px;
      height: 28px;
      border: 1px solid #1890ff;
      border-radius: 50%;
      display: flex;
      margin: 0px 3px;
      justify-content: center;
      align-items: center;
    }
    .layer-list__move {
      margin-left: auto;
      margin-right: 10px;
    }
  }
  .layer-list__item:hover {
    background-color: #e6f7ff;
    cursor: pointer;
  }
  .layer-list__item--active {
    border: 1px solid #1890ff;
    cursor: pointer;
  }
  .layer-list__item--dragging {
    opacity: 0.5;
    background-color: #1890ff;
    color: white;
  }
}
</style>
<style lang="scss">
.layer-list {
  .ant-tooltip-inner {
    background-color: #1890ff;
    color: white;
    border-radius: 4px;
    padding: 4px 8px;
  }
  .ant-tooltip-arrow {
    border-top-color: #1890ff !important;
  }
}
</style>
